<template>
	<view class="handoverperson">
		<u-toast ref="uToast" />
		<view class="handoverperson-top">
			选择交接人
			<img @click="back" src="@/static/img/common_btn_return_n.png" style='width: 10px;height: 19px;' alt="">
		</view>

		<view class="done" v-if="show_type == 0">
			<u-input class="handinput" v-model="search"  :border="border" @confirm="onEnterSearch" />
			<view v-for="item in list" @click="show_detail(item)" class="done-item">
				<span>{{item.chineseName}}</span>
				<view class="done-item-2">选择</view>
			</view>
		</view>
		<view class="done1" v-if="show_type == 1">
			<view class="handoverperson-current-title">
				<img src="@/static/img/cheliangjiaojie_icon.png" width="20px" alt="">当前驾驶人
			</view>
			<view class="handoverperson-current">
				<view><span>驾驶人</span>{{info.memberName}}</view>
				<hr>
				<view><span>联系方式</span>{{info.mobileNum}}</view>
				<hr>
				<view><span>上班时间</span>{{info.attendanceTime}}</view>
				<hr>
				<view><span>车牌号</span>{{info.plateNumber}}</view>
				<hr>
				<view><span>车架号</span>{{info.carVin}}</view>

			</view>
			<view class="handoverperson-current-title">
				<img src="@/static/img/cheliangjiaojie_icon.png" width="20px" alt="">交接人信息
			</view>
			<view class="handoverperson-current">
				<view><span>交接人</span>{{item.chineseName}}</view>
				<hr>
				<view><span>联系方式</span>{{item.mobileNum}}</view>
				<hr>
				<view><span>交接时间</span>当前时间</view>
				<hr>
				<view><span>交办前车辆里程</span>{{info.preHandOverMileage}} KM</view>
				<hr>
				<view><span style='float: left;'>当前车辆里程</span><input style="float: left;margin-top: -10px;" type="number" @change="getKM" v-model="nowHandOverMileage" placeholder="输入">KM</view>
				<hr>
				<view><span>行驶里程</span>{{driving_mileage}} KM</view>

			</view>
			<view class="handoverperson-add" v-if="show_btn == 0" @click="add">确认</view>
			<view class="handoverperson-add" v-if="show_btn == 1" @click="save">提交</view>
			<view class="handoverperson-add"  v-if="show_btn == 1" @click="cancel">取消</view>
		</view>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import amap from "@/js_sdk/amap-wx.js";
	let _this;
	export default {
		data() {
			return {
				border:true,
				name: '',
				search: '',
				is_list_all: false,
				limit: 10,
				page: 1,
				total: 1,
				star: 0,
				dict: '',
				list: [],
				detail_comment: '',
				detail: '',
				processId: '',
				show_type: 0,
				show_btn:0,
				info: {},
				item: '',
				driving_mileage: '',
				nowHandOverMileage: ''
			};
		},
		created() {
			_this = this;
		},
		computed: mapState(['hasLogin', 'userName', 'token']),
		mounted() {
			this.get_list();
		},
		methods: {
			getKM() {
				this.driving_mileage = this.nowHandOverMileage - this.info.preHandOverMileage;
			},
			onEnterSearch: function() {
				console.log(_this.search);
				this.get_list();

			},
			
			show_detail(item) {
				this.show_type = 1;
				this.item = item;
				var self = this;
				
				uni.request({
					url: this.$store.state.ip + 'vehicle/handover/findCarBindByUserId', //仅为示例，并非真实接口地址。
					
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						if (res.data.code == 200) {
							_this.info = res.data.data;
							
						} else if (res.data.code == '040081') {
				
							_this.$refs.uToast.show({
								title: '登录过期，请重新登录',
								url: '/pages/login/login',
								duration: 2000,
								position: 'bottom',
								params: {
									id: 1,
									menu: 3
								}
							})
				
							console.log(res);
						}else{
							_this.$refs.uToast.show({
								title: res.data.data,
								duration: 2000,
								position: 'bottom',
							})
							
						}
				
				
					},
					fail: (res) => {
						console.log(res);
					}
				});
				
			},

			get_list() {
				uni.request({
					url: this.$store.state.ip + 'admin/sysClient/findPage', //仅为示例，并非真实接口地址。
					data: {
						"limit": _this.limit + "",
						"page": _this.page + "",
						"name": _this.search
					},
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						if (res.data.code == 200) {
							_this.list = res.data.data.list;
							_this.total = res.data.data.totalCount;
							_this.page = res.data.data.currPage;
						} else if (res.data.code == '040081') {
				
							_this.$refs.uToast.show({
								title: '登录过期，请重新登录',
								url: '/pages/login/login',
								duration: 2000,
								position: 'bottom',
								params: {
									id: 1,
									menu: 3
								}
							})
				
							console.log(res);
						}else{
							_this.$refs.uToast.show({
								title: res.data.msg,
								duration: 2000,
								position: 'bottom',
							})
							
						}
				
				
					},
					fail: (res) => {
						console.log(res);
					}
				});
			

			},
			getTime() {
				var date1 = new Date();
				var year = date1.getFullYear();
				var month = date1.getMonth() + 1;
				var day = date1.getDate();
				var hours = date1.getHours();
				var minutes = date1.getMinutes();
				var seconds = date1.getSeconds();
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds
			},
			back() {
				if(this.show_type == 0){
					uni.navigateBack({
						delta:1
					})
				}else{
					this.show_type = 0;
				}
			},
			add() {
				this.show_btn = 1;
			},
			save(){
				this.info.nextMemberId = this.item.id;
				this.info.nextMemberName = this.item.chineseName;
				this.info.nextPhoneNum = this.item.mobileNum;
				this.info.nowHandOverMileage = this.nowHandOverMileage;
				this.info.handOverTime = this.getTime()
				this.info.drivingMileage = this.driving_mileage;
				console.log(this.info);
				if (this.info.nowHandOverMileage == '') {
					_this.$refs.uToast.show({
						title: '请输入行驶里程',
						duration: 2000,
						position: 'bottom',
					})
					return;
				}
				uni.request({
					url: this.$store.state.ip + 'vehicle/handover/start', //仅为示例，并非真实接口地址。
					data: this.info,
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						if (res.data.code == 200) {
							_this.$refs.uToast.show({
								title: '提交成功',
								url: '/pages/function/function',
								duration: 2000,
								position: 'bottom',
							})
						} else if (res.data.code == '040081') {
				
							_this.$refs.uToast.show({
								title: '登录过期，请重新登录',
								url: '/pages/login/login',
								duration: 2000,
								position: 'bottom',
								params: {
									id: 1,
									menu: 3
								}
							})
				
							console.log(res);
						}else{
							_this.$refs.uToast.show({
								title: res.data.msg,
								duration: 2000,
								position: 'bottom',
							})
							
						}
				
				
					},
					fail: (res) => {
						console.log(res);
					}
				});
				
			},
			cancel() {
				this.show_btn = 0;
			},
		}
	};
</script>

<style>
	.handinput{
		background-color: #fff;
		margin-bottom: 20px;
		
	}
	.handoverperson-current {
		margin-top: 9px;
		padding: 0 16px;
		border-radius: 4px;
		background-color: #fff;
		margin-bottom: 28px;
	}

	.handoverperson-current input {
		height: 38px;
		width: 80px;
		border: none;
	}

	.handoverperson-current view {
		padding: 15px 0px;
	}

	.handoverperson-current view {
		font-size: 15px;
		color: #35374B;
	}

	.handoverperson-current hr {
		background-color: #F0F1F5;
		color: #F0F1F5;
		border: 1px solid #F0F1F5;
	}

	.handoverperson-current view span {
		display: inline-block;
		padding-left: 5px;
		width: 120px;
		font-size: 15px;
		color: #949799;
	}

	.handoverperson-current-title img {
		float: left;
		margin-right: 6px;
		font-size: 15px;
	}

	.handoverperson-add {
		margin: 8px 12px;
		text-align: center;
		color: #1869E0;
		border: 1px solid #1869E0;
		border-radius: 24px;
		padding: 10px;
	}

	.handoverperson-add:hover {
		background-color: #1869E0;
		color: #fff;
	}

	.handoverperson-cancel {
		margin: 10px 12px;
		text-align: center;
		color: #1869E0;
		border: 1px solid #1869E0;
		border-radius: 24px;
		padding: 10px;
	}

	.handoverperson-cancel:hover {
		background-color: #1869E0;
		color: #fff;
	}

	.handoverperson {
		width: 100%;
		overflow: auto;
		background-color: #F2F4F7;
	}

	.handoverperson-top img {
		position: absolute;
		left: 0px;
		top: 26px;
		padding: 12px;
	}

	.handoverperson-top img:active {
		background-color: #eee;
	}

	.handoverperson-top {
		background-color: #fff;
		font-size: 16px;
		color: #35374b;
		text-align: center;
		height: 80px;
		line-height: 100px;
	}

	.handoverperson-model {
		height: 50px;
		border-top: 1px solid #DEDFE2;
		clear: left;
		background-color: #fff;
	}

	.handoverperson-model-box {
		height: 34px;
		margin: 8px 12px;
		background-color: #f0f1f5;
		border-radius: 40px;
	}

	.handoverperson-model-box-item {
		float: left;
		width: 50%;
		border-radius: 40px;
		height: 34px;
		color: #a5a6ad;
		font-size: 15px;
		text-align: center;
		line-height: 34px;
	}

	.model-active {
		background-color: #1869e0;
		color: #fff;
	}

	.handoverperson hr {
		margin: 0px;
	}

	.handoverperson-info {
		padding: 19px 12px;
		background-color: #fff;
	}

	.handoverperson-info>span {
		color: #242533;
		font-size: 16px;
	}

	.handoverperson-info-list {
		margin-top: 20px;
		padding: 0px 27px;
	}

	.handoverperson .done {
		height: calc(100% - 100px);
		overflow: auto;
		margin: 12px 12px 0px 12px;
	}

	.handoverperson .done1 {
		overflow: auto;
		padding: 20px 12px;
		box-sizing: border-box;
	}

	.handoverperson .done-item span {
		display: inline-block;
		width: 70%;
		word-break: break-all;
	}

	.done1 .el-input {
		margin-bottom: 20px;
	}

	.handoverperson .done-item {
		height: 50px;
		line-height: 50px;
		padding: 0 12px;
		background-color: #fff;
		color: #35374B;
		border-bottom: 1px solid #eee;
	}

	.handoverperson .done-item:active {
		background-color: #eee;
	}

	.handoverperson .done-item-2 {
		float: right;
		color: #1869e0;
		font-size: 14px;
	}
</style>
